<%--
  User: qw
  Date: 2020/10/25
  Time: 21:34
--%>
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${cooperation.title}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/font-awesome.css">
</head>
<body>
<!-- 头部导航栏 -->
<%@ include file="../header.jsp" %>
<section class="mt-3">
    <div class="container">
        <div class="container">
            <!-- 分类导航栏 -->
            <div class="row">
                <div class="col">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white small">
                            <li class="breadcrumb-item"><a
                                    href="${path}/cooperation/selectAll?currentPageIndex=1">组队广场</a></li>
                            <li class="breadcrumb-item"><a
                                    href="${path}/cooperation/selectByCid?cid=${cooperation.catalog.cid}&currentPageIndex=1">${cooperation.catalog.cname}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">${cooperation.title}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!-- 内容 -->
            <div class="row mt-3">
                <!-- 左侧栏 -->
                <div class="col-lg-8 col-sm-12 shadow-sm">
                    <!-- 左侧栏头部 -->
                    <div class="row">
                        <div class="col-2 ml-4 innerAvatar">
                            <a href="${path}/user/${cooperation.user.uid}">
                                <img src="${cooperation.user.photo}" alt="头像" class="rounded-circle ml-2 shadow"
                                     style="width: 60px; height: 60px;">
                            </a>
                        </div>
                        <div class="col-6 ml-3 innerInfo" id="div1" style="position: relative">
                            <p style="max-height: 10px;">${cooperation.user.nickname}</p>
                            <p class="small text-primary"><a
                                    href="${path}/user/${cooperation.user.uid}" id="username" style="text-decoration: none;">@${cooperation.user.username}</a></p>
                            <p class="small text-muted" style="margin-top: -10px;">发布于:${cooperation.publish_time}</p>
                        </div>
                        <div id="div2"
                             style="position: relative; top: 10px; right: 2px;width: 50px;height: 30px; line-height: 30px">
                            <img src="../../images/view.png" alt=""
                                 style="width: 20px;height: 20px;margin-bottom: 3px;">
                            <p style="display: inline-block; font-size: 18px;">${cooperation.view}</p>
                        </div>
                    </div>
                    <div class="ml-5 mt-3" style="line-height: 15px;">
                        <div class="row">
                            <h5 class="font-weight-normal">${cooperation.title}</h5>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">招募要求：</p>
                            <p class="col-10">${cooperation.demand}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">所需人数：</p>
                            <p class="col-10">${cooperation.population}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">发布时间：</p>
                            <p class="col-10">${cooperation.publish_time}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">结束时间：</p>
                            <p class="col-10">${cooperation.end_time}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">招募状态：</p>
                            <p class="col-10">
                                <c:choose>
                                    <c:when test="${cooperation.status == 1}">
                                        组队中...
                                    </c:when>
                                    <c:otherwise>
                                        组队结束${cooperation.status}
                                    </c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-2" style="margin-left: -15px;">招募相关：</p>
                            <p class="col-10">
                                <c:choose>
                                    <c:when test="${cooperation.related == null || cooperation.related==''}">
                                        无
                                    </c:when>
                                    <c:otherwise>
                                        ${cooperation.related}
                                    </c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-4" style="margin-left: -15px;">已参加的队员：${cooperation.list}</p>
                        </div>
                        <div class="row mt-2 text-muted">
                            <p class="col-4" style="margin-left: -15px;">招募内容：</p>
                        </div>
                        <div class="row text-muted">
                            <div class="col-12 overflow-auto"
                                 style="margin-left: -15px;line-height: 20px;height: 180px;">${cooperation.content}</div>
                        </div>
                        <shiro:authenticated>
                            <div class="row justify-content-end mb-2 text-right">
                                <div class="col-3">
                                    <button type="button" class="btn btn-outline-primary"
                                            onclick="toSend(${cooperation.user.username})">
                                        <i class="fa fa-envelope-o" aria-hidden="true" onclick="toSend()"></i>联系我!
                                    </button>
                                </div>
                            </div>
                        </shiro:authenticated>
                    </div>
                </div>
                <!-- 右侧栏-->
                <div class="col-lg-3 ml-3 d-none d-lg-block shadow-sm mb-5" style="max-height: 260px;">
                    <h5 class="mt-3 text-muted">关于作者</h5>
                    <div class="row mt-3 mb-3">
                        <div class="col-5">
                            <div>
                                <a href="${path}/user/${cooperation.user.uid}">
                                    <img src="${cooperation.user.photo}" alt="头像" style="width: 90px; height: 90px;"
                                         class="rounded-circle shadow-sm text-center">
                                </a>
                            </div>
                        </div>
                        <div class="col-7">
                            <p class="pt-3">${cooperation.user.nickname}</p>
                            <p class="text-primary small" style="margin-top: -10px"><a
                                    href="${path}/user/${cooperation.user.uid}" style="text-decoration: none;">@${cooperation.user.username}</a></p>
                            <p class="text-info small" style="margin-top: -10px">${cooperation.user.major}</p>
                        </div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="row justify-content-center mt-3">
                        <div class="col-4 text-muted text-center">
                            <p class="small">点赞数</p>
                            <p class="font-weight-bold" style="margin-top: -10px">
                                ${cooperation.user.likes}
                            </p>
                        </div>
                        <div class="col-4 text-muted text-center">
                            <p class="small">主题数</p>
                            <p class="font-weight-bold" style="margin-top: -10px">${uidCount}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- <footer class="footer mt-auto py-3 fixed-bottom shadow" style="background: lightgrey">
    <div class="container">
        <span class="text-muted ml-2">@WDNBD</span>
    </div>
</footer> -->

<!-- 退出登录的模态框 -->
<div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="prompt-text">点击"确定"退出账号</div>
                <div class="bgimg_lf"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.bundle.js"></script>
<script>
    function toSend() {
        let username = document.getElementById("username").innerHTML.replace("@","");
        window.location.href = '/message/send?friendname=' + username;
    }
</script>
<shiro:authenticated>
    <script src="/js/message.js"></script>
</shiro:authenticated>
</body>
</html>
